<template>
    <view class="container">
        <view class="top">
            <view class="logo"></view>
            <view class="notice">
                <view class="notice-info">
                    <view class="notice-info-label">公告：</view>
                    <u-notice-bar
                        :text="['内容管理编辑与整理宣布通知空间展示', '内容管理编辑与整理宣布通知空间展示']"
                        color="#000000"
                        bgColor="#ffffff"
                        icon=""
                        fontSize="24rpx"
                        direction="column"
                        class="notice-bar"
                        :duration="3500"
                    ></u-notice-bar>
                </view>
            </view>
            <hongren-swiper
                s_type="swiper3"
                :s_list="swiper3List"
            ></hongren-swiper>
            <view class="activity-notice">
                <view class="activity-info">
                    <view class="activity-title">盲盒抽奖火热进行中</view>
                    <view class="activity-desc">最高可得隐藏款数字藏品和百倍积分</view>
                </view>
                <view class="activity-btn">
                    <view class="activity-btn-icon"></view>立即查看
                </view>
            </view>
        </view>
        <view class="old-hot">
            <view class="title-hot"></view>
            <series-card v-for="k in 8" :key="k"></series-card>
        </view>
    </view>
</template>

<script>
    import SeriesItem from '@/components/SeriesItem'
    import HongrenSwiper from "@/components/HongrenSwiper"
    import SeriesCard from "@/components/SeriesCard"
    export default {
        name: "index",
        components: {
            SeriesItem,
            HongrenSwiper,
            SeriesCard
        },
        data() {
            return {
                swiper3List:[
                    {id:1,path:"/pages/index/index",image:"https://img.pic88.com/preview/2020/08/05/15966335151455887.jpg!s640?imageView2/1/sharpen/1"},
                    {id:2,path:"",image:"https://img.pic88.com/preview/2020/08/31/15988419695f4c6471d8f94.jpg!s640?imageView2/1/sharpen/1"},
                    {id:3,path:"",image:"https://img.pic88.com/preview/2020/08/02/1596407329317339.jpg!s640?imageView2/1/sharpen/1"},
                    {id:4,path:"",image:"https://img.pic88.com/preview/2020/08/02/1596407366316871.jpg!s640?imageView2/1/sharpen/1"},
                    {id:5,path:"",image:"https://img.pic88.com/preview/2020/08/27/15985369545f47bcfadd1da.jpg!s640?imageView2/1/sharpen/1"},
                    {id:6,path:"",image:"https://img.pic88.com/preview/2020/08/31/15988435565f4c6aa48f798.jpg!s640?imageView2/1/sharpen/1"},
                    {id:7,path:"",image:"https://img.pic88.com/preview/2020/08/02/1596332785734561.jpg!s640?imageView2/1/sharpen/1"},
                    {id:8,path:"",image:"https://img.pic88.com/preview/2020/08/01/15962891251131599.jpg!s640?imageView2/1/sharpen/1"},
                ],
            }
        },
        onLoad() {

        },
        methods: {

        }
    }
</script>

<style lang="scss" scoped>
    .container {
        .top {
            box-sizing: border-box;
            padding-top: 56rpx;
            background: url("https://ionepin-dev.oss-cn-shenzhen.aliyuncs.com/4c58819fa36003a4f3dc83bee4542c99051ad5b2.png") no-repeat;
            background-size: cover;
            width: 100%;
            padding-bottom: 38rpx;
        }
        .logo {
            background: url("https://img.ionepin.com/3ac0f68cf87da6c06788437989a12b0bd703a8d5.png") no-repeat;
            background-size: 100% 100%;
            width: 166rpx;
            height: 111rpx;
            margin: 0 auto;
        }
        .notice {
            height: 50rpx;
            background: #FFFFFF;
            opacity: 0.8;
            margin-top: 20rpx;
            padding: 0 40rpx;
            .notice-info {
                display: flex;
                margin: 0 auto;
                align-items: center;
                padding: 8rpx 0;
                .notice-info-label {
                    font-size: 24rpx;
                    font-weight: 400;
                    color: #000000;
                }
                .notice-bar {
                    padding: 0;
                }
            }
        }
        .activity-notice {
            box-sizing: border-box;
            background: url("https://img.ionepin.com/32f0fbb846f212994cb7767e627b76935b407122.png") no-repeat;
            background-size: 100% 100%;
            height: 150rpx;
            margin: 0 26rpx;
            display: flex;
            align-items: center;
            padding-left: 33rpx;
            .activity-info {
                .activity-title {
                    font-size: 32rpx;
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 45rpx;
                }
                .activity-desc {
                    font-size: 26rpx;
                    font-weight: 400;
                    color: #ABA4AA;
                    line-height: 37rpx;
                }
            }
            .activity-btn {
                box-sizing: border-box;
                width: 202rpx;
                height: 50rpx;
                background: #FFFFFF;
                box-shadow: 0 2rpx 11rpx 0 rgba(103, 161, 255, 0.5);
                border-radius: 29rpx;
                font-size: 28rpx;
                font-weight: 400;
                color: #282639;
                text-align: right;
                line-height: 2;
                position: relative;
                margin-left: 20rpx;
                padding-right: 22rpx;
                .activity-btn-icon {
                    position: absolute;
                    width: 44rpx;
                    height: 61rpx;
                    background: url("https://img.ionepin.com/ed0b32ed98e09e04eb0ec70e9185e602e972ec92.png") no-repeat;
                    background-size: 100% 100%;
                    left: 17rpx;
                    bottom: 2rpx;
                }
            }
        }
        .old-hot {
            background: #F9F9F9;
            padding-top: 33rpx;
            .title-hot {
                background: url("https://img.ionepin.com/812e8692f7c11d99c94c95395433caaa21d29275.png") no-repeat;
                background-size: 100% 100%;
                width: 220rpx;
                height: 34rpx;
                margin: 0 auto 39rpx auto;
            }
        }
    }
</style>
